<template>
  <div class="c_contentt">
    <!-- <navTop :headTitle="headTitle" :showBack="showBack" :bkParam="bkParam" :showAdd="showAdd"></navTop> -->
    <!-- <div class="c_contentt"> -->
    <div style="    position: fixed;
    z-index: 566;
    background: #fff;
    width: 100%;
    top: 0;"
    >
      <div class="c_patient_img">
        <span v-show="showaveter == 'S'">
          <img :src="this.doctorInfo.DOCTORIMAGEPATH | showHeadPic"/>
        </span>
      </div>
      <div class="c_patient">
        <p class="c_patient_p">{{this.doctorInfo.DOCTORNAME}}</p>
        <p class="c_patient_p">{{this.doctorInfo.DOCTORDEPARTMENT}}</p>
      </div>
      <div class="c_patient_info">
        <p>{{this.patientInfo.PATIENT_NAME}}</p>
      </div>
      <section class="c_nav">
        <div @click.stop="getDayActivities()"><span @click="changeShowType='liuyan'" :class="{c_nav_active: changeShowType =='liuyan'}">留言</span></div>
        <div @click.stop="getyaofang(true)"><span @click="changeShowType='bingli'" :class="{c_nav_active: changeShowType =='bingli'}">处方</span></div>
      </section>
    </div>
    <!-- :class="{ischeckmedic:item.ACNO==this.acno}" -->
    <transition>
      <section class="bingli" v-show="changeShowType =='bingli'" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy"
        infinite-scroll-distance="10"
      >
        <div class="bingli_con" v-for="(item,index) in list1" @click="goDetail(item)"
          :key="item.id" :class="{ischeckmedic:item.ACNO==checkACNO}"
        >
          <p>处方编号：{{item.ORDERCODE}}</p>
          <p>处方详情：
            <ul style="list-style:none;margin-bottom:0;padding-left:0.6rem" :class="[isFold[index]?'isfold' : '']">
              <li v-for="(item,index) in item.DURGSLIST.split(',')" :key="item.id">
                {{index+1}}.{{item.split('#')[1]}}<span style="float:right">{{item.split('#')[2]}}</span>
              </li>
            </ul>
          </p>
          <p @click.stop="Fold(index)" style="color:#3190e8;display:inline-block">{{isFold[index]?'显示全部':'收起'}}</p>
          <p>医嘱：{{item.ACSM}}</p>
          <p style="color:#aaa;z-index:500">开药时间：{{item.OPENTIME}}</p>
        </div>
        <p class="loadingT">{{loadingText}}</p>
      </section>
    </transition>
    <transition>
      <section class="liuyan" v-show="changeShowType =='liuyan'">
        <section class="liyan_con">
          <div v-for="item in list" :key="item.id">
            <p :class="{doctor:item.WHOSE==1,patient:item.WHOSE==2}"><span class="liuyan_time">{{item.LEAVETIME}}</span>{{item.WHOSE==2?"医生":"患者"}}：{{item.LEAVEMESSAGE}}</p>
          </div>
          <!-- <div class="medic" v-for="item in list1" :key="item.id" v-if="item.OPENTIME==item.CURTIME"> -->
          <!--
          <div class="medic" v-for="item in list1" :key="item.id" v-if="item.ISVIEW=='0'">
            <p>{{doctorInfo.DOCTORNAME}}&nbsp;给您开了一个处方</p>
            <p>
              <span class="medic_i"><i class="iconfont icon-ziyuan1"></i></span>
              <span>
                <p>处方号：{{item.ORDERCODE}}</p>
                <p>药方：<span class="medic_money" v-for="item in item.DURGSLIST.split(',')" :key="item.id">{{item.split('#')[1]}}，</span></p>
              </span>
            </p>
            <p class="medic_check">
              <span>{{item.CURTIME}}</span>
              <span @click="checkMedic(item.ORDERCODE, item)">查看</span>
            </p>
          </div>
          -->
        </section>
        <!-- <p class="loadingT">{{loadingText}}</p> -->
        <section class="huifu">
          <input type="text" placeholder="请输入回复内容" class="inputMessage" v-model="inputValue">
          <button type="submit" class="buttonMessage" @click="submitLiuyan">回复</button>
        </section>
      </section>
    </transition>
    <!-- </div> -->
    <backTop></backTop>
  </div>
</template>
<script>
/* import navTop from '~/components/common/navTop.vue'; */

import backTop from '~/components/common/backTop.vue';

const { config } = window;

export default {
  components: {
    /* navTop, */
    backTop,
  },
  data() {
    return {
      showaveter: `${config.SHOWAEVTER}`,
      flag: 0,
      acno: '',
      /* headTitle: '医生留言', */
      changeShowType: 'liuyan',
      list: [],
      list1: [],
      role: '',
      inputValue: '',
      ts: this.newStore(),
      tq: this.getData(),
      checkACNO: '',
      page: 1,
      loadingText: '',
      busy: true,
      isFold: [],
      doctorInfo: {},
      patientInfo: {},
    };
  },
  created() {
    // this.$root.showfooter = false;
    document.title = '医生留言';
    this.getDayActivities(this.today);
    this.getyaofang(true);
  },
  mounted() {
    if (sessionStorage.getItem('rybToken') == '' || sessionStorage.getItem('rybToken') == null) {
      this.$router.push('/login');
    }
    this.doctorInfo = JSON.parse(this.$route.query.jsonParamsDoctor);
    this.patientInfo = JSON.parse(this.$route.query.jsonParamsPatient);
    console.log('--------------- 传递过来的医生信息，患者信息----------------------');
    console.log(this.$route.query.jsonParamsDoctor);
    console.log(this.$route.query.jsonParamsPatient);
  },
  destroyed() {
    // this.$root.showfooter = true;
  },
  updated() {
    this.$nextTick(() => {
      const liuyan = this.$el.querySelector('.liuyan');
      liuyan.scrollTop = liuyan.scrollHeight;
    });
  },
  filters: {
    showHeadPic(value) {
      if (!value || value == '' || value == 'null' || value == undefined) return '../../static/images/dochead.jpg';
      return `https://${sessionStorage.getItem('hospitalDomainname')}/doctor${value}`;
    },
  },
  methods: {
    Fold(index) {
      this.isFold.splice(index, 1, !this.isFold[index]);
    },
    loadMore() {
      this.busy = true;
      setTimeout(() => {
        this.page += 1;
        this.getyaofang(true);
      }, 500);
    },
    goDetail(item) {
      const Mes = window.confirm('是否查看订单详情？');
      if (Mes == true) {
        if (item.ORDSTATUS == '0') {
          this.$router.push({
            name: '/chufang/nonePayment',
            query: {
              fs: item.FS,
              orderId: item.ORDID,
              doctorname: item.DOCTORNAME,
              yaofangname: item.DURGSTORENAME,
              yaofangadr: item.DURGSTOREADDR,
              yaofangphone: item.DURGSTOREPHONE,
              acsm: item.ACSM,
              yff: item.PRESCRIBEUNITPRICE,
              jgf: item.JGF,
              psf: item.PSF,
              druglist: item.DURGSLIST,
              leavemes: item.ORDERLEAVEMESSAGE,
              oprlb: item.OPRLB,
            },
          });
        } else if (item.ORDSTATUS == '3') {
          this.$router.push({
            name: '/chufang/unship',
            query: {
              doctorname: item.DOCTORNAME,
              kuaidiname: item.SHR,
              kuaidiphone: item.SHRMOBILE,
              yaofangname: item.DURGSTORENAME,
              yaofangadr: item.DURGSTOREADDR,
              acsm: item.ACSM,
              yaofangphone: item.DURGSTOREPHONE,
              syr: item.SHR,
              syrdh: item.SHRMOBILE,
              draglist: item.DURGSLIST,
              status: item.ORDSTATUS,
              shadr: item.SHADDRESS,
              leavemes: item.ORDERLEAVEMESSAGE,
              yff: item.PRESCRIBEUNITPRICE,
              jgf: item.JGF,
              psf: item.PSF,
              oprlb: item.OPRLB,
            },
          });
        } else if (item.ORDSTATUS == '4') {
          this.$router.push({
            name: '/chufang/prescribeOrderDetail',
            query: {
              doctorname: item.DOCTORNAME,
              kuaidiname: item.SHR,
              kuaidiphone: item.SHRMOBILE,
              yaofangname: item.DURGSTORENAME,
              yaofangadr: item.DURGSTOREADDR,
              ordercode: item.ORDERCODE,
              yaofangphone: item.DURGSTOREPHONE,
              syr: item.SHR,
              syrdh: item.SHRMOBILE,
              draglist: item.DURGSLIST,
              orderstatus: item.ORDSTATUS,
              shadr: item.SHADDRESS,
              yff: item.PRESCRIBEUNITPRICE,
              jgf: item.JGF,
              psf: item.PSF,
              leavemes: item.ORDERLEAVEMESSAGE,
              time: item.OPENTIME,
              acsm: item.ACSM,
              fktime: item.FKTIME,
              delivertime: item.DELIVERTIME,
              kdmc: item.KDMC,
              kdno: item.KDNO,
              kdmcvalue: item.KDMCVALUE,
              oprlb: item.OPRLB,
            },
          });
        } else if (item.ORDSTATUS == '5') {
          this.$router.push({
            name: '/chufang/prescribeOrderDetail',
            query: {
              doctorname: item.DOCTORNAME,
              kuaidiname: item.SHR,
              kuaidiphone: item.SHRMOBILE,
              yaofangname: item.DURGSTORENAME,
              yaofangadr: item.DURGSTOREADDR,
              yaofangphone: item.DURGSTOREPHONE,
              syr: item.SHR,
              syrdh: item.SHRMOBILE,
              draglist: item.DURGSLIST,
              status: item.ORDSTATUS,
              shadr: item.SHADDRESS,
              leavemes: item.ORDERLEAVEMESSAGE,
              acsm: item.ACSM,
              yff: item.PRESCRIBEUNITPRICE,
              jgf: item.JGF,
              psf: item.PSF,
              oprlb: item.OPRLB,
            },
          });
        }
      }
    },
    checkMedic(id, item) {
      const Mes1 = window.confirm('是否查看药方详情？');
      if (Mes1 == true) {
        const res = JSON.stringify({
          OTRequest: {
            VERSION: '1.0',
            TN: 'F27.APP.02.34',
            CLIENTID: 'YLAPP',
            RYBID: 'PAT',
            TOKEN: `${sessionStorage.getItem('rybToken')}`,
            DATA: { acno: id },
          },
        });
        this.spost(this.ts, '/doctor/AppMainServlet.ap', {
          '': res,
        }).then(() => {
          this.checkACNO = id;
          this.$router.push({
            name: '/chufang/nonePayment',
            query: {
              fs: item.FS,
              orderId: item.ORDID,
              doctorname: item.DOCTORNAME,
              yaofangname: item.DURGSTORENAME,
              yaofangadr: item.DURGSTOREADDR,
              yaofangphone: item.DURGSTOREPHONE,
              draglist: item.DURGSLIST,
              acsm: item.ACSM,
              yff: item.PRESCRIBEUNITPRICE,
              jgf: item.JGF,
              psf: item.PSF,
              druglist: item.DURGSLIST,
              leavemes: item.ORDERLEAVEMESSAGE,
              oprlb: item.OPRLB,
            },
          });
        });
      }
    },
    submitLiuyan() {
      /*
        判断是否输入留言内容
      */
      if (this.inputValue.replace(/(^\s*)|(\s*$)/g, '') == '') {
        this.$messageBox('提示', '请输入内容！');
        return false;
      }

      const date = new Date();
      const y = date.getFullYear();
      let m = date.getMonth() + 1;
      const hour = date.getHours() < 10 ? `0${date.getHours()}` : date.getHours();
      const minute = date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes();
      const second = date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds();

      const res = JSON.stringify({
        OTRequest: {
          VERSION: '1.0',
          TN: 'F27.APP.02.21',
          CLIENTID: 'YLAPP',
          RYBID: 'PAT',
          TOKEN: `${sessionStorage.getItem('rybToken')}`,
          DATA: {
            patientId: this.patientInfo.PATIENT_ID, // 测试数据，实际数据由用户选择患者
            doctorId: this.doctorInfo.DOCTORID,
            leaveMessage: this.inputValue,
            flag: '1',
          },
        },
      });

      m = m < 10 ? `0${m}` : m;
      let d = date.getDate();
      d = d < 10 ? `0${d}` : d;
      const Newdate = `${`${y}-${m}-${d}` + ' '}${hour}:${minute}:${second}`;

      this.spost(this.ts, '/doctor/AppMainServlet.ap', {
        '': res,
      }).then((ts) => {
        this.list.push({
          LEAVETIME: Newdate,
          WHOSE: '1',
          LEAVEMESSAGE: this.inputValue,
        });
        this.inputValue = '';
      });
    },
    getyaofang(flag) {
      const req = JSON.stringify({
        OTRequest: {
          VERSION: '1.0',
          TN: 'F27.APP.02.20',
          CLIENTID: 'YLAPP',
          RYBID: 'PAT',
          TOKEN: `${sessionStorage.getItem('rybToken')}`,
          DATA: {
            patientId: this.patientInfo.PATIENT_ID, // 测试数据，实际数据由用户选择患者
            doctorId: this.doctorInfo.DOCTORID,
            rowsperpage: '10',
            page: `${this.page}`,
            ordercolumn: 'openDate',
            ordertype: 'desc',
          },
        },
      });
      this.spost(this.ts, '/doctor/AppMainServlet.ap', {
        '': req,
      }).then((ts) => {
        // this.list1 = ts.d.DATAOBJ.DATA;
        for (let i = 0; i < ts.d.DATAOBJ.DATA.length; i += 1) {
          this.isFold.push(true);
        }
        if (flag) {
          this.list1 = this.list1.concat(ts.d.DATAOBJ.DATA);
          if (this.list1.OPENTIME == this.list1.CURTIME) {
            this.ishidelist1 = true;
          } else {
            this.ishidelist1 = false;
          }
          if (ts.d.DATAOBJ.DATA.length == 0) {
            this.busy = true;
            this.loadingText = '没有更多数据';
          } else {
            this.busy = false;
            this.loadingText = '加载中...';
          }
        } else {
          this.list1 = ts.d.DATAOBJ.DATA;
          this.busy = false;
        }
      });
    },
    getDayActivities(day) {
      this.curDay = day;
      const req = JSON.stringify({
        OTRequest: {
          VERSION: '1.0',
          TN: 'F27.APP.02.19',
          CLIENTID: 'YLAPP',
          RYBID: 'PAT',
          TOKEN: `${sessionStorage.getItem('rybToken')}`,
          DATA: {
            patientId: this.patientInfo.PATIENT_ID, // 测试数据，实际数据由用户选择患者
            doctorId: this.doctorInfo.DOCTORID,
            rowsperpage: '20',
            pageno: '1',
            ordercolumn: 'leavetime',
            ordertype: 'desc',
          },
        },
      });

      this.spost(this.ts, '/doctor/AppMainServlet.ap', {
        '': req,
      }).then((ts) => {
        this.list = ts.d.DATAOBJ.DATA.reverse();
      });
    },
  },
};
</script>
<style scoped>
.loadingT{
  text-align: center;
  color: #ccc;
  font-size: .8rem;
}
.c_patient_info{
  float: right;
  vertical-align: middle;
  font-size: .8rem;
  margin: 1rem 3rem 0rem 0rem;
  background-color: #fff;
  -webkit-box-shadow:0px 0px 10px #c8c8c8 ;
  -moz-box-shadow:0px 0px 10px #c8c8c8 ;
  box-shadow: 0px 0px 10px #c8c8c8;
  width: 5rem;
  border-radius: 10px;
  line-height: 1.5rem;
  text-align: center;
  color: #666;
}
.c_contentt {
  /* background: #fff; */
  padding-top: .1rem;
}
.c_patient {
  /* border-bottom: 1px solid #ddd; */
  padding: 0.5rem .5rem;
  display: inline-block;
}
.c_patient_p {
  margin-top: 1rem;
  font-size: 0.9rem;
  font-family: "Microsoft Yahei";
  color: #333;
  margin: 0.2rem;
}
.c_patient_img {
  display: inline-block;
  vertical-align: bottom;
  border-radius: 50%;
  width: 2.5rem;
  height: 3rem;
  margin-left: .5rem;
}
.c_patient_img img{
  width: 2.5rem;
  border-radius: .5rem;
}
.c_nav {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  padding: 0.6rem;
  border-bottom: 1px solid #ebebeb;
  font-size: .8rem;
}
.c_nav div {
  flex: 1;
  text-align: center;
}
.c_nav span {
  padding: 0.2rem;
  color: #666;
  font-family: "Microsoft Yahei";
}
.c_nav_active {
  border-bottom: 2px solid #3190e8;
}
.bingli {
  padding: 0 0.4rem;
  margin-top: 7.6rem
}
.bingli_con {
  line-height: 0.8rem;
  border-bottom: 1px solid #f1f1f1;
  margin: 0.5rem 0;
}
.bingli_con p {
  font-size: 0.9rem;
  padding: 0.2rem;
  line-height: 1rem;
  margin-bottom: 0.4rem;
}
.bingli_con p:last-child{
  line-height: 1rem;
}
.bingli_time {
  float: right;
  font-size: 0.9rem;
  font-weight: normal;
  color: rgb(54, 207, 161);
  font-family: "Microsoft Yahei";
}
.liuyan {
  overflow: auto;
  /* background-color: #fff; */
/*   padding-bottom: 1rem;*/
  margin-top: 5rem;
  margin-bottom: 3rem;
}
.liuyan .patient {
  background-color: #b0edf5;
  float: right;
  margin: 1rem;
  padding: 0.6rem;
  font-size: 0.6rem;
  margin-bottom: 0;
  width: 60%;
  word-break: break-all;
  border-radius: 15px;
}
.liuyan .doctor {
  background-color: rgba(196, 204, 204, 0.466);
  float: left;
  margin: 1rem;
  padding: .5rem 1rem .5rem 1rem;
  font-size: 0.6rem;
  font-family: "Microsoft Yahei";
  margin-bottom: 0;
  width: 60%;
  word-break: break-all;
  border-radius: 10px;
  color: #444;
}
.medic{
  background-color:#fff;
  float: left;
  margin: 1rem;
  padding: 0.8rem;
  font-family: "Microsoft Yahei";
  margin-bottom: 0;
  width: 80%;
  word-break: break-all;
  font-size: 0.9rem;
  border: 1px solid #f1f1f1;
  box-shadow:2px 2px 6px #f1f1f1;
}
.medic p{
  margin-bottom: 0.3rem;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap
}
.medic .medic_money{
  color: rgb(209, 189, 6);
}
.medic_i i{
  font-size: 2rem;
  color: #3190e8;
  float: left;
  padding: 0.4rem;
  line-height: 1;
}
.medic_check{
  border-top: 1px solid #f1f1f1;
  text-align: right;
  margin-top: 1rem;
  line-height: 1rem;
  padding: 0.5rem 0.5rem 0 0;
  color: #3190e8;
}
.medic_check span:first-child{
  float: left;
  color: #ccc;
}
.liuyan_time {
  font-size: 0.6rem;
  display: block;
  color: #aaa;
}
.inputMessage {
  outline: none;
  padding:0.5rem 0;
  width: 80%;
  border: none;
  font-size: 0.9rem;
  font-family: "Microsoft Yahei";
}
.buttonMessage {
  outline: none;
  width: 20%;
  padding:0.2rem 0;
  border: none;
  background: #3190e8;
  color:#fff;
  font-size: .8rem;
  letter-spacing: .2rem;
  border-radius: 10px;
}
.huifu {
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 99;
  overflow: hidden;
  border-top: 1px solid #f1f1f1;
  padding-left: .5rem;
  padding-right: .5rem;
  background: #fff;
}
.ischeckmedic{
  background: #f1f1f1;
}
.isfold{
  max-height: 3rem;
  overflow: hidden;
}
.patient_question {
  background: #3190e8;
  float: right;
  color: #fff;
  padding: 0.2rem 1.2rem;
}
</style>

